<template>
    <div class="resetVerify">
        <assets-head :title="title" />
        <div class="content">
            <div>
                <div class="mb-25 textColor">{{ $t('证件照/上传护照') }}</div>
                <div class="flex mt-33 mb-80 justify-between">
                    <div class="flex-1 flex flex-col text-center justify-center items-center">
                        <div class="upload-wrap">
                            <van-uploader v-model="frontFile" :max-count="1" :after-read="afterRead"
                                @click-upload="onClickUpload('frontFile')" />
                        </div>
                        <div class="mt-32 font-26 h-20 text-grey">{{ $t('证件正面') }}</div>
                    </div>
                    <div class="flex-1 flex flex-col text-center justify-center items-center">
                        <div class="upload-wrap">
                            <van-uploader v-model="reverseFile" :max-count="1" :after-read="afterRead"
                                @click-upload="onClickUpload('reverseFile')" />
                        </div>
                        <div class="mt-32 font-26 h-20 text-grey">{{ $t('证件反面') }}</div>
                    </div>
                    <div class="flex-1 flex flex-col text-center justify-center items-center">
                        <div class="upload-wrap">
                            <van-uploader v-model="fileList" :max-count="1" :after-read="afterRead"
                                @click-upload="onClickUpload('fileList')" />
                        </div>
                        <div class="mt-32 font-26 h-20 text-grey">{{ $t('手持证件照') }}</div>
                    </div>
                </div>
            </div>
            <ExChecked class="mb-42" :list="list" @checked="onChecked"></ExChecked>
            <div v-if="type == 0">
                <ExInput :label="$t('资金密码')" :placeholderText="$t('请输入您的资金密码')" v-model="password" :tips="$t('请输入6位数字')"
                    typeText="password" />
                <ExInput :label="$t('确认资金密码')" :placeholderText="$t('请输入您的资金密码')" v-model="repassword" :tips="$t('请输入6位数字')"
                    typeText="password" />
            </div>
            <ExInput :label="$t('留言')" :placeholderText="$t('请输入留言')" v-model="remark" />
            <div class="btn" @click="submit">{{ $t('确定') }}</div>
        </div>
    </div>
</template>

<script>
import assetsHead from "@/components/assets-head";
import ExInput from "@/components/ex-input";
import ExChecked from "@/components/ex-checked";
import { _uploadImage, _applyIdentify, _getIdentify } from '@/API/fund.api'
import { Uploader } from 'vant';
import { mapGetters } from "vuex";
import Axios from "@/API/userCenter.js";
export default {
    props: {

    },
    components: {
        [Uploader.name]: Uploader,
        assetsHead,
        ExInput,
        ExChecked
    },
    data() {
        return {
            title: '',
            remark: '',
            password: '',
            repassword: '',
            type: 0,
            radio: 0,
            list: [
                {
                    name: this.$t('重置资金密码'),
                    type: 0
                },
                // {
                //     name: this.$t('重置手机号'),
                //     type: 1
                // },
                // {
                //     name: this.$t('重置邮箱'),
                //     type: 2
                // },
                // {
                //     name: this.$t('重置谷歌验证'),
                //     type: 3
                // },
            ],
            frontFile: [],
            reverseFile: [],
            fileList: [],
            idcard_path_front: '',
            idcard_path_back: '',
            idcard_path_hold: '',
            curFile: 'frontFile',
            status: '', // 0
        }
    },
    computed: {
        ...mapGetters('user', ['userInfo'])
    },
    mounted() {
        let type = this.$route.query.type;
        this.type = type;
        this.init(this.type);
        this.getSafewordApply();

        if (this.userInfo.googleverif) {
            this.list.push({
                name: this.$t('重置谷歌验证'),
                type:3
            });
        }
        
        if(this.userInfo.emailverif){
            this.list.push({
                name: this.$t('重置邮箱'),
                type:2
            });
        }
    },
    methods: {
        init(type) {
            if (type == 1) {
                this.title = this.$t("人工重置手机号");
            } else if (type == 2) {
                this.title = this.$t("人工重置邮箱");
            } else if (type == 3) {
                this.title = this.$t("人工重置谷歌验证");
            } else {
                this.title = this.$t("人工重置资金密码");
            }
        },
        onChecked(index) {
            this.type = index;
            this.init(this.type)
        },
        afterRead(file) { /// 处理文件
            console.log(file);
            file.status = 'uploading'
            file.message = this.$t('上传中...')
            _uploadImage(file).then(data => {
                file.status = 'success';
                file.message = this.$t('上传成功');
                file.resURL = data
                this[this.curFile] = [file]
            }).catch(err => {
                file.status = 'failed';
                file.message = this.$t('图片上传失败');
            })
        },
        onClickUpload(type) {
            console.log(type);
            this.curFile = type
        },
        getSafewordApply() {
            Axios.getSafewordApply({
            }).then((res) => {
                if (res.data.length != 0) {
                    this.status = res.data[0].status;
                    this.idcard_path_front = res.data[0].idcard_path_front
                    this.idcard_path_back = res.data[0].idcard_path_back
                    this.idcard_path_hold = res.data[0].idcard_path_hold
                }
            }).catch((error) => {
                if (error.code === 'ECONNABORTED') { this.$toast(this.$t('网络超时！')); }
                else if (error.msg !== undefined) { this.$toast(this.$t(error.msg)); }
            });
        },
        setSafewordApply() {
            let operate;
            if (this.type == 0) {
                operate = 0
            } else if (this.type == 1) {
                operate = 2
            } else if (this.type == 2) {
                operate = 3
            } else if (this.type == 3) {
                operate = 1
            }
            if (!this.frontFile.length || !this.reverseFile.length || !this.fileList.length) {
                this.$toast(this.$t('请上传完整证件信息'))
                return
            }                        
            Axios.setSafewordApply({
                idcard_path_front: this.frontFile.length && this.frontFile[0].resURL || '',
                idcard_path_back: this.reverseFile.length && this.reverseFile[0].resURL || '',
                idcard_path_hold: this.fileList.length && this.fileList[0].resURL || '',
                operate: operate, //0 修改资金 1取消谷歌绑定 ，2取消手机绑定 3取消邮箱绑定
                safeword: this.password,
                safeword_confirm: this.repassword,
                remark: this.remark
            }).then((res) => {
                if (res.code == 0) {
                this.$router.push({ name: 'resetSuccess', query: { type: this.type } })
                }
            }).catch((error) => {
                if (error.code === 'ECONNABORTED') { this.$toast(this.$t('网络超时！')); }
                else if (error.msg !== undefined) { this.$toast(this.$t(error.msg)); }
            });
        },
        submit() {
            this.setSafewordApply();

        }
    }
}
</script>

<style lang="scss" scoped>
.resetVerify {
    width: 100%;
    box-sizing: border-box;
}


.content {
    font-size: 26px;
    padding: 32px;

    @include themify() {
        border-top: themed("line_color");
    }
}

.btn {
    @include themify() {
        background: themed("btn_main");
    }

    color: #fff;
    height: 88px;
    line-height: 88px;
    text-align: center;
    font-size: 32px;
    border-radius: 10px;
}

.upload-wrap {
    width: 220px;
    height: 220px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;

    img {
        height: 100%;
    }
}

.opacity0 {
    opacity: 0;
}

.opacity1 {
    opacity: 1;
}

.imgShow {
    top: 0;
    position: absolute;
}
</style>